/**简易分页器组件
 *
 * API:
 * @currentPage 当前页码
 * @pageSize 每页显示多少条
 * @total 数据总数
 * @onPageChange 当前页发生变化时触发的回调，参数是更新后的页码。子传父的关键。
 */

import React, { useState } from "react";
import styles from "./index.module.less";

const defaultCurrent = 1; // 默认当前页
const defaultPageSize = 20; // 默认每页20条数据
const defaultTotal = 0; // 默认总数为0
const valueLimit = /^\+?[1-9]\d*$/; // 限定输入页码为正整数

const Pagin = (props) => {
    let { currentPage, pageSize, total, onPageChange } = props;

    currentPage = currentPage || defaultCurrent;
    pageSize = pageSize || defaultPageSize;
    total = total || defaultTotal;

    const [current, setCurrent] = useState(currentPage);
    const [page, setPage] = useState(1);

    const handlePre = () => {
        if (onPageChange && current > 1) {
            onPageChange(current - 1);
            setCurrent(current - 1);
        }
    };

    const handleNext = () => {
        if (onPageChange && current < Math.ceil(total / pageSize)) {
            onPageChange(current + 1);
            setCurrent(current + 1);
        }
    };

    const handleChange = (e) => {
        const val = e.target.value;
        if (valueLimit.test(val) || val === "") {
            setPage(val);
        }
    };

    const jumpToPage = () => {
        if (onPageChange && page >= 1 && page <= Math.ceil(total / pageSize)) {
            onPageChange(page);
            setCurrent(Number(page));
        }
    };

    return (
        <>
            {total > 0 && (
                <div className={styles.pagin}>
                    <div className={styles.left}>
                        <div
                            className={`${styles.pre} ${
                                current <= 1 ? "" : styles.active
                            }`}
                            onClick={handlePre}
                        >
                            上一页
                        </div>
                        <div className={styles.current}>{current}</div>
                        <div
                            className={`${styles.next} ${
                                current >= Math.ceil(total / pageSize)
                                    ? ""
                                    : styles.active
                            }`}
                            onClick={handleNext}
                        >
                            下一页
                        </div>
                    </div>
                    <div className={styles.rig}>
                        <span className={styles.total}>
                            共{Math.ceil(total / pageSize)}页
                        </span>
                        <div className={styles.jump_wrap}>
                            <span
                                className={styles.jump_btn}
                                onClick={jumpToPage}
                            >
                                前往
                            </span>
                            <input
                                type="text"
                                autoComplete="off"
                                className={styles.jump_num}
                                value={page}
                                onChange={(e) => {
                                    handleChange(e);
                                }}
                            />
                            <span>页</span>
                        </div>
                    </div>
                </div>
            )}
        </>
    );
};

export default Pagin;
